<template>
  <div class="page">
    <div class="back">
      <Icon name="arrow-left" @click="$router.back()" />
    </div>
    <div class="welcome">
      <div class="text">注册你的账号</div>
      <router-link to="/login" class="register"> 已有账号👉登陆 </router-link>
    </div>
    <div class="login-form">
      <Form @submit="loginSubmit">
        <div class="input-item">
          <div class="text">手机号</div>
          <Field
            clearable
            required
            :maxlength="11"
            :rules="[
              {
                pattern:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '请输入正确的手机号',
              },
            ]"
            class="input"
            v-model="loginForm.username"
            placeholder="请输入手机号"
            label-align="top"
          ></Field>
        </div>
        <div class="input-item">
          <div class="text">密码</div>
          <Field
            clearable
            required
            :rules="[
              {
                pattern: /^[0-9a-zA-Z]{6,20}$/,
                message: '长度为6-20位 只能由数字、大小写字母构成',
              },
            ]"
            type="password"
            class="input"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></Field>
        </div>
        <div class="input-item">
          <div class="text">确认密码</div>
          <Field
            clearable
            required
            :rules="[
              {
                validator: validatorComfirmPwd,
              },
            ]"
            type="password"
            class="input"
            v-model="loginForm.confirmPassword"
            placeholder="请输入密码"
          ></Field>
        </div>
        <Button
          :loading="loading"
          class="login-button"
          round
          type="primary"
          native-type="submit"
          block
        >
          注册
        </Button>
      </Form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { register } from "@/api/login";
import { Icon, Form, Field, showToast, Button } from "vant";
import { reactive, ref } from "vue";

const loginForm = reactive({
  username: "",
  password: "",
  confirmPassword: "",
  remember: false,
});

const router = useRouter();

const loading = ref(false);

const validatorComfirmPwd = (val: string) => {
  if (/^[0-9a-zA-Z]{6,20}$/.test(val)) {
    if (loginForm.password === val) {
      return true;
    } else {
      return "两次密码不一致";
    }
  } else {
    return "长度为6-20位 只能由数字、大小写字母构成";
  }
};

const loginSubmit = () => {
  loading.value = true;
  register(loginForm)
    .then(() => {
      loading.value = false;
      showToast("注册成功");
      setTimeout(() => {
        router.replace("/login");
      }, 2000);
    })
    .catch(() => {
      showToast({ type: "fail", message: "注册失败" });
      loading.value = false;
    });
};
</script>
<style lang="less" scoped>
.page {
  height: 100%;
  .back {
    padding: 10px;
  }
}
.login-form {
  padding: 20px;
  .login-button {
    position: absolute;
    bottom: 10px;
    width: calc(100% - 40px);
  }
  .input-item {
    padding: 10px 0;
    .reset {
      padding: 10px 0;
      position: absolute;
      right: 20px;
      color: #7798f9;
    }
    .text {
      color: #334154;
      font-size: 16px;
      margin-bottom: 15px;
    }
    .input {
      box-shadow: 2px 2px 2px 2px #f7f7f7, -2px -2px 2px 2px #fefefe;
      border-radius: 15px;
      /deep/input {
        color: #616e7c;
      }
    }
  }
}
.welcome {
  font-size: 25px;
  width: 100%;
  padding-top: 20px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .register {
    font-size: 14px;
    color: #616e7c;
  }
}
</style>
